<!-- eslint-disable vue/html-indent -->
<template>
  <view class="mgt1" v-if="dataList.length > 0">
    <tm-sheet
      :margin="[0]"
      :padding="[32, 20]"
      v-for="(item, index) in dataList"
      :key="index"
    >
      <view class="flex">
        <view class="flex flex-sub" @click="goMenu(item, 'menu')">
          <view class="icon-img">
            <view
              v-if="
                !item.icon &&
                (item.itemType === '成员' || item.itemType === '个人'|| item.itemType === '人员')
              "
            >
              <avatar :userName="item.label"></avatar>
            </view>
            <img v-else :src="item.icon" class="icon-img" />
          </view>
          <view class="m-l-15 flex-list">
            <view class="flex title-flex">
              <view class="wd150">
                <tm-text
                  _class="text-weight-b m-b-3"
                  :font-size="32"
                  :label="item.label"
                ></tm-text>
              </view>
              <tm-tag
                :shadow="0"
                :margin="[10, 10]"
                font-color="#0052D9"
                color="#F2F3FF"
                size="xs"
                :label="item.itemType"
                v-show="item.itemType"
              ></tm-tag>
            </view>
            <tm-text
              :font-size="24"
              color="grey"
              _class="text-overflow-1"
              :label="item.remark"
              v-show="item.remark"
            ></tm-text>
          </view>
        </view>

        <!-- <view
          class="rg-time"
          @click="goDetail(item, 'menuDetail')"
          v-show="item.isShow"
        >
          <tm-icon
            :font-size="28"
            color="#000000"
            name="tmicon-info-circle"
          ></tm-icon>
        </view> -->
      </view>
    </tm-sheet>
  </view>

  <tm-sheet v-else :margin="[0]">
    <tm-result :showBtn="false" subTitle=" " title="暂无数据"></tm-result>
  </tm-sheet>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import avatar from '../../../components/avatar/avatar.vue'
import companyIcon from '../../../static/base/office.png'
import directoryIcon from '../../../static/base/folder-fill.png'
import groupsIcon from '../../../static/groups.png'
import departmentIcon from '../../../static/department.png'
import orgGroupIcon from '../../../static/org-group.png'
import filesIcon from '../../../static/files.png'
import userTieIcon from '../../../static/base/user-tie.png'

type Props = {
  setList: any[]
}
const props = defineProps<Props>()
const dataList = computed(() => {
  const array: any[] = []
  props.setList.forEach(item => {
    if (!item.icon) {
      switch (item.itemType) {
        case '目录':
          item.icon = directoryIcon
          break
        case '单位':
          item.icon = companyIcon
          break
        // case '人员':
        //   item.icon = '/static/members.png'
        //   break
        case '群组':
          item.icon = groupsIcon
          break
        case '部门':
          item.icon = departmentIcon
          break
        case '组织群':
          item.icon = orgGroupIcon
          break
        case '存储资源':
          item.icon = filesIcon
          break
        default:
          if (item.itemType !== '成员' && item.itemType !== '个人' && item.itemType !== '人员') {
            item.icon = userTieIcon
          }
          break
      }
    }
    array.push(item)
  })
  return array
})
const emit = defineEmits(['btnClick'])
const goMenu = (item: any, type: any) => {
  if (item) {
    emit('btnClick', item, type)
  }
}
// const goDetail = (item: any, type: any) => {
//   if (item) {
//     emit('btnClick', item, type)
//   }
// }
</script>

<style lang="scss">
@import '../../../common/style/global.scss';
.icon-img {
  width: 48px;
  height: 48px;
  border-radius: 4px;
}
.flex-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}
.title-flex {
  align-items: center;
}
.rg-time {
  display: flex;
  align-items: center;
}
.flex-sub {
  flex: 1;
}
.wd150 {
  max-width: 220px;
}
</style>
